<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p><Back></Back>我的订单</p>
		</header>

		<!-- 订单列表部分 -->
		<h3>未支付订单信息：</h3>
		<ul class="order">
		    <li v-for="item in unpaidOrders" :key="item.orderId">
		        <div class="order-info">
		            <p>
		                {{item.business.businessName}}
		                <i class="fa fa-caret-down" @click="detailetShow(item)"></i>
		            </p>
		            <div class="order-info-right">
		                <p>&#165;{{item.orderTotal}}</p>
		                <div class="order-info-right-icon" @click="toPayment(item.orderId)">去支付</div>
						<div class="order-info-right-icon cancel-button" @click="cancelOrder(item.orderId)">取消</div>
		            </div>
		        </div>
		        <ul class="order-detailet" v-show="item.isShowDetailet">
		            <li v-for="odItem in item.list" :key="odItem.food.foodId">
		                <p>{{odItem.food.foodName}} x {{odItem.quantity}}</p>
		                <p>&#165;{{odItem.food.foodPrice * odItem.quantity}}</p>
		            </li>
		            <li>
		                <p>配送费</p>
		                <p>&#165;{{item.business.deliveryPrice}}</p>
		            </li>
		        </ul>
		    </li>
		</ul>

		<h3>已支付订单信息：</h3>
		<ul class="order">
		    <li v-for="item in paidOrders" :key="item.orderId">
		        <div class="order-info">
		            <p>
		                {{item.business.businessName}}
		                <i class="fa fa-caret-down" @click="detailetShow(item)"></i>
		            </p>
		            <div class="order-info-right">
		                <p>&#165;{{item.orderTotal}}</p>
		            </div>
		        </div>
		        <ul class="order-detailet" v-show="item.isShowDetailet">
		            <li v-for="odItem in item.list" :key="odItem.food.foodId">
		                <p>{{odItem.food.foodName}} x {{odItem.quantity}}</p>
		                <p>&#165;{{odItem.food.foodPrice * odItem.quantity}}</p>
		            </li>
		            <li>
		                <p>配送费</p>
		                <p>&#165;{{item.business.deliveryPrice}}</p>
		            </li>
		        </ul>
		    </li>
		</ul>

		<!-- 底部菜单部分 -->
		<Footer></Footer>

	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	import Back from '../components/Back.vue';
	
	export default {
	    name: 'OrderList',
	    data() {
	        return {
	            orderArr: [],
	            user: {}
				
	        };
	    },
	    computed: {
	         unpaidOrders() {
	                return this.orderArr.filter(item => item.orderState === 0);
	            },
	            paidOrders() {						
	                return this.orderArr.filter(item => item.orderState === 1);
	            }
	    },
	    created() {
	        this.user = this.$getSessionStorage('user');
	        let url = `OrdersController/listOrdersByUserId/${this.user.userId}`;
	        this.$axios.get(url).then(response => {
	            let result = response.data.result;
	            for (let orders of result) {
	                orders.isShowDetailet = false;
	            }
	            this.orderArr = result;
	        }).catch(error => {
	            console.error(error);
	        });
	    },
	    methods: {
	        detailetShow(orders) {
	            orders.isShowDetailet = !orders.isShowDetailet;
	        },
			toPayment(orderId){
				this.$router.push({path:'/payment',query:{orderId:orderId}});
			},
			cancelOrder(orderId) {
				            // 在这里处理取消订单的逻辑，例如发起一个 API 请求
				            this.$axios.post('OrdersController/cancelOrdersById', this.$qs.stringify({
				                orderId: orderId
				            })).then(response => {
				                // 根据实际 API 的返回数据做相应处理
				                if (response.data==1) {
				                    // 取消成功后，从订单数组中移除该订单或者更新订单状态
									alert("取消订单成功！");
				                    this.orderArr = this.orderArr.filter(order => order.orderId !== orderId);
				                } else {
				                    console.error('取消订单失败');
				                }
				            }).catch(error => {
				                console.error(error);
				            });
				        }
			
			
	    },
	    components: {
	        Footer,
			Back
	    }
	}
</script>
<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 历史订单列表部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order {
		width: 100%;
		padding-bottom: 14vw;
	}

	.wrapper .order li {
		width: 100%;
	}

	.wrapper .order li .order-info {
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 3vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order li .order-info .order-info-right {
		display: flex;
	}

	.wrapper .order li .order-info .order-info-right .order-info-right-icon {
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
		padding: 2vw 4vw; /* 添加 padding 以便显示内容 */
	}

	.wrapper .order li .order-info .order-info-right .order-info-right-icon.cancel-button {
		background-color: #ff4d4d; /* 设置取消按钮背景色 */
	}

	.wrapper .order li .order-detailet {
		width: 100%;
	}

	.wrapper .order li .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 3vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
